<script setup lang="ts">
import { computed } from 'vue';
import { ref } from 'vue';

// 0 账号登录 1手机登录
const active = ref(0);

interface Refer {
  username: string;
  password: any;
}
// 个人用户__手机登陆表单
const referPhoneForm: any = ref({ phone: '', code: '' });
// 个人用户__账号密码登陆表单
const referForm: any = ref({ username: '', password: '' });
//  提交的loading
const submitLoading = ref(false);
// 发送验证码
const sendSMSCodeText = ref('获取验证码');
const sendSMSCodeTime=ref(0)
const sendSMSCodeStatus=ref(false)
// 能否提交
// const isReferFormSubmit=computed(()=>{
//   return referForm.username.value.length > 1 && referForm.password.value.length > 1
// })
// const isPhoneFormSubmit=(()=>{
//   const reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/
//       return reg.test(referPhoneForm.phone.value) && referPhoneForm.code.value.length > 5
// })

// 账号登录
const handleLoginSubmit = () => {};

// 发送验证码
const handleSendCode = () => {};

// 手机登录
const handlePhoneSubmit = () => {};

// 60秒后重新获取
const changeSendOvertime=() =>{
      if (sendSMSCodeTime.value > 0) {
        sendSMSCodeTime.value--
        sendSMSCodeText.value = sendSMSCodeTime.value + '秒后重新获取'
        setTimeout(changeSendOvertime, 1000)
      } else {
        sendSMSCodeTime.value = 0
        sendSMSCodeText.value = '获取验证码'
        sendSMSCodeStatus.value = false
      }
    }
</script>
<template>
  <div class="container">
    <div class="login">
      <div class="iconfont ciocio"></div>
      <div class="info">医药全生命周期一站式服务</div>
    </div>
    <van-tabs v-model:active="active" title-active-color="#009140" color="#fff">
      <van-tab title="账号登录" title-class="tab-title"> </van-tab>
      <van-tab title="手机登录" title-class="tab-title" />
    </van-tabs>
    <!-- 个人用户__账号密码 -->
    <van-form v-if="active === 0">
      <van-cell-group inset>
        <van-field
          v-model="referForm.username"
          placeholder="请输入手机号 / 用户名"
          autocomplete="off"
        />
        <van-field
          v-model="referForm.password"
          type="password"
          placeholder="请输入密码"
          autocomplete="off"
        />
      </van-cell-group>
      <div class="login_btn">
        <van-button
          block
          type="primary"
          loading-text="登录中..."
          color="linear-gradient(to right, #05ad55, #009140)"
          :loading="submitLoading"
          @click="handleLoginSubmit()"
        >
          登 录
        </van-button>
      </div>
    </van-form>
    <!-- 个人用户__手机登录-->
    <van-form v-if="active === 1">
      <van-cell-group inset>
        <van-field
          v-model="referPhoneForm.phone"
          type="number"
          maxlength="11"
          center
          clearable
          autocomplete="off"
          placeholder="请输入手机号"
        >
          <template #button>
            <van-button size="small" type="primary" @click="handleSendCode()">{{
              sendSMSCodeText
            }}</van-button>
          </template>
        </van-field>
        <van-field
          v-model="referPhoneForm.code"
          type="number"
          maxlength="6"
          autocomplete="off"
          placeholder="请输入验证码"
        />
      </van-cell-group>
      <div class="login_btn">
          <van-button
            block
            class="froms-submit"
            type="primary"
            color="linear-gradient(to right, #05ad55, #009140)"
            :loading="submitLoading"
            @click="handlePhoneSubmit()"
          >
            登 录
          </van-button>
      </div>
    </van-form>

    <!-- footer -->
    <div class="otherLogins">
      <van-divider>使用其他账号登录</van-divider>
      <div class="contain">
        <div class="item weixin">
        <div class="image"><i class="iconfont">&#xe60c;</i></div>
        <div class="info">微信</div>
      </div>
      <div class="item qq">
        <div class="image"><i class="iconfont">&#xe729;</i></div>
        <div class="info">QQ</div>
      </div>
      </div>
    </div>

    <div class="comment">CIO合规保证组织 版权所有</div>
  </div>
</template>

<style scoped lang="scss">
.container {
  background-color: #fff;
  .login {
    height: 100px;
    position: relative;
    .ciocio {
      font-size: 30px;
      color: #009140;
      left: 10px;
      top: 12px;
      position: absolute;
    }

    .info {
      font-size: 14px;
      color: #ccc;
      padding-top: 10px;
      left: 15px;
      top: 35px;
      position: absolute;
    }
  }
  .login_btn {
    margin: 16px 0;
    padding: 0 20px;
  }
  .otherLogins {
    overflow: hidden;
    margin-top: 15px;
    padding: 0 25px;
    text-align: center;
    .contain {
      display: flex;
      justify-content: center;
      .item {
      box-sizing: border-box;
      margin: 10px;
      cursor: pointer;
      .image {
        margin-bottom: 5px;

        .iconfont {
          font-size: 26px;
          color: #666;
          border: none;
        }
      }

      .info {
        font-size: 12px;
        color: #999;
      }

      &.account .iconfont {
        color: #ff9600;
      }

      &.weixin .iconfont {
        color: #07c160;
      }

      &.qq .iconfont {
        color: #19a9f1;
      }
    }
    }
  }
  .comment {
    text-align: center;
    padding: 30px 0;
    font-size: 14px;
    color: #888888;
  }
}
</style>
